<template>
  <div class="box">
    <div class="content">
      <div class="popup">
        <img src="@/assets/img/cn.png" class="lang" />
        <img src="@/assets/img/logo.png" class="logo" />
        <!-- 登录表单 -->
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm">
          <el-form-item prop="account" class="inputGroup">
            <h2>{{$t('lang.account')}}:</h2>
            <el-input
              type="text"
              v-model="ruleForm.account"
              placeholder="Email Address"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password" class="inputGroup">
            <h2>{{$t('lang.password')}}:</h2>
            <el-input
              v-model="ruleForm.password"
              placeholder="Your Password"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item class="button">
            <el-button
              type="primary"
              class="loginBtn"
              @click="submitForm('ruleForm')"
              >{{$t('lang.login')}}</el-button
            >
            <el-button type="primary" plain class="registerBtn"
              >{{$t('lang.register')}}</el-button
            >
          </el-form-item>
        </el-form>
        <!-- 国际化设置 -->
        <el-select
          v-model="lang"
          @change="changeLang"
          :placeholder="$t('lang.lang')"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      ruleForm: { account: "", password: "" },
      rules: {
        account: [{ required: true, trigger: "blur", message: "请输入用户名" }],
        password: [{ required: true, trigger: "blur", message: "请输入密码" }],
      },
      options: [
        { value: "zh", label: this.$t("lang.cs") },
        { value: "en", label: this.$t("lang.is") },
      ],
      lang:'',
    };
  },
   created(){
    this.lang = this.$store.getters.locale;
  },
  methods: {
    //登录
    submitForm() {
      console.log("登录被调用了");
      //1.验证输入的用户名和密码是否正确
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          //验证成功
          //调用vuex 中 user子树里面的 登录的 action 动作
          this.$store.dispatch("LoginAction", this.ruleForm);
        } else {
          //验证没通过
          console.log("验证没通过");
        }
      });
    },
    //切换语言集
  changeLang() {
    console.log("切换语言集触发了");
    // this.$i18n.locale = 'zh';
    //调用 vuex中 的lang子树 mutations
    this.$store.commit("SET_LANG", this.lang);
    this.$router.go(0);
  },
  },
  
 
};
</script>

<style scoped lang="less">
.box {
  display: flex;
  height: 100%;
  flex-direction: column;
  .content {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    .popup {
      position: relative;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      width: 378px;
      padding: 38px 46.5px;
      background: #fff;
      color: #5c5a5a;
      .lang {
        width: 50px;
        height: auto;
        position: absolute;
        top: 0;
        right: 0;
      }
      .logo {
        width: 140px;
        height: auto;
        align-self: center;
      }

      .inputGroup {
        margin-top: 24px;

        h2 {
          font-size: 14px;
          font-weight: 600;
        }
      }
      .button {
        margin-top: 24px;
        display: flex;
        flex-direction: column;
        width: 100%;
        margin-left: none !important;
        .loginBtn {
          margin: 20px 0;
          width: 100%;
        }
        .registerBtn {
          width: 100%;
          margin: 10px 0 0 0;
        }
      }
    }
  }
}
</style>
